<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>{$ResearchName}</title>
	<include file="./Public/tpl/wx/meta.html" />
	<link rel="stylesheet" type="text/css" href="{$AppCss}research.css" media="all">
    <script type="text/javascript" src="{$WebPublic}jquery/jquery-1.7.2.min.js"></script>
</head>
<body>
	<!--wrapper start-->
	<div class="wrapper">
    <switch name="Action">
    	<case value="start">
        	<style>
				.wrapper{text-align: center;}
				.content-w1{border: 1px solid #939393;}
				.content-w1,.content-w2,.content{background-color: #e4e4e4;border-bottom: 1px solid #939393;}
				.content-w1,.content-w2{display: inline-block;padding: 0px 0px 3px;}
				.content{width: 266px;margin: 0px auto;padding: 0px 0px 10px;}
				.title{font-size: 20px;padding: 10px 18px 0px;}
				.connect{width: 100%;display: block;margin: 10px 0px;}
				.desc-cont{text-align: left;padding: 0 18px;}
				.next-btn{color: #FFF;width: 120px;display: block;padding: 8px 22px;font-size: 16px;margin: 20px auto 0px;}
				.page-url{margin-top: 30px;}
            </style>
            <img class="bg" src="{$AppImages}bg.jpg">
            <div style="height: 25px;"></div>
            <div class="content-w1">
                <div class="content-w2">
                    <div class="content">
                        <div class="title">{$ResearchName}</div>
                        <img class="connect" src="{$AppImages}connect.png">
                        <div class="desc-cont">{$StartDescription}</div>
                        <notempty name="NextUrl"><a class="next-btn" href="{$NextUrl}" style="text-decoration:none;">马上开始</a></notempty>
                    </div>
                </div>
            </div>
        </case>
        <case value="user">
        		<style>
				body{background-color: #ffb100;}
				.inner-cont{width: 280px;margin: 0 auto;padding-top: 20px;}
				.qtitle{line-height: 30px;font-size: 26px;font-weight: bold;}
				.field-contain{margin-top: 20px;}
				.input-label{font-size: 18px;line-height: 32px;}
				.input-text {display: block;width: 236px;height: 32px;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;
					padding: 2px 5px;background: -moz-linear-gradient(top, #d2cfd2 0, #ffffff 50%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d2cfd2), color-stop(50%, #ffffff));
					background: -webkit-linear-gradient(top, #d2cfd2 0, #ffffff 50%);
					background: -o-linear-gradient(top, #d2cfd2 0, #ffffff 50%);
					background: -ms-linear-gradient(top, #d2cfd2 0, #ffffff 50%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2cfd2', endColorstr='#ffffff', GradientType=0 );
					background: linear-gradient(top, #d2cfd2 0, #ffffff 50%);
					border: 1px solid #c6c3c6;border-top-width: 2px;font-size:19px;}
				.loading-mask{background: rgba(0,0,0,0);}
				.tip{color: #FFF;font-size: 12px;}
				.next-btn{border: 0px;margin: 0;box-shadow: #666 1px 1px 2px;-webkit-box-shadow: #666 1px 1px 2px;-moz-box-shadow: #666 1px 1px 2px;}
			</style>
			<script type="text/javascript" charset="utf-8">
                $(document).ready(function(){
						$("#save-btn").on("click",function(){
							var MemberRealName = $("#MemberRealName").val();
							var MemberMobile= $("#MemberMobile").val();
							if(MemberRealName == ""){
								alert("请输入用户名!");
								$("#MemberRealName").focus();
								return false;
							}
							if(MemberMobile == ""){
								alert("请输入手机号码!");
								$("#MemberMobile").focus();
								return false;
							}
							var regu = /^[0-9]{11}$/;
							var re = new RegExp(regu);
							if(!re.test(MemberMobile)){
								alert("请输入正确的手机号码!");
								$("#MemberMobile").focus();
								return false;
							}
							var url = "{$NextUrl}&username="+MemberRealName+"&mobile="+MemberMobile;
							window.location.href = url;
						});
                });
            </script>
            <img class="bg" src="{$AppImages}bg.jpg">
            <div class="inner-cont">
                <div class="qtitle">请先填写您的资料：</div>
                <div class="field-contain">
                    <label for="MemberRealName" class="input-label">请输入您的姓名:</label>
                    <input name="MemberRealName" id="MemberRealName" class="input-text" type="text" value="{$MemberRealName}">
                </div>
                <div class="field-contain">
                    <label for="MemberMobile" class="input-label">请输入您的手机号码:</label>
                    <input name="MemberMobile" id="MemberMobile" class="input-text" type="tel" value="{$MemberMobile}">
                    <span class="tip">*请务必填写正确，此手机号将作为您以后领奖的依据</span>
                </div>
                <div class="btn-wrapper"><button id="save-btn" class="next-btn">开始</button></div>
            </div>
        </case>
        <case value="vote">
        	<style>
				.question{z-index: 2;position: relative;padding-top: 20px;}
				.index{position: absolute;color: #b40000;top: 75px;left: 80px;font-size: 10px;}
				.index strong{font-size: 12px;}
				.question .title{font-size: 24px;text-align: center;max-height: 77px;overflow: hidden;text-overflow: ellipsis;padding: 0 10px;line-height: 26px;margin-bottom: 10px;}
				.question .option{position: relative;height: 45px;}
				.question .option .text{position: relative;line-height: 40px;overflow: hidden;}
				.question .option .i{float: left;margin-left: 20px;}
				.question .option .otext{margin-left: 45px;overflow: hidden;max-width: 260px;height: 40px;}
				.question .option .oimg,.question .option .oimg-sel{position: absolute;top: 4px;left: 10px;width: 300px;}
				.question .option .oimg-sel{display: none;}
				.question .option-sel .oimg{display: none;}
				.question .option-sel .oimg-sel{display: block;}
				.result-timeout .timg{margin-left: -40px;}
				#submit{width: 80px;margin: 20px 20px 0px 0px;float: right;position: relative;}
				#submit img{position: absolute;top: 0px;left: 0px;width: 100%;}
				#submit span{position: relative;color: #FFF;font-size: 18px;line-height: 40px;margin-left: 8px;}
				/*.page-url{position: absolute;width: 100%;bottom: 0px;}*/
				.tip{color: #FFF;font-size: 12px;margin-left: 20px;}
			</style>
        <img class="bg" src="{$AppImages}bg.jpg">
		<div class="question" style="overflow:hidden;">
        	<volist name="Question" id="qt">
                <div class="title">{$qt.QuestionName}</div>
                <div class="tip">注：本题为<eq name="qt.IsMultiple" value="1">多<else/>单</eq>选题！</div>
                <div class="options">
                	<volist name="qt.Item" id="it">
                        <div class="option" data-value="{$it.ItemID}">
                            <img class="oimg" src="{$AppImages}option_bg.png">
                            <img class="oimg-sel" src="{$AppImages}option_sel_bg.png">
                            <div class="text"><div class="otext">{$it.ItemName}</div></div>
                        </div>
                    </volist>
                </div>
            </volist>
            	<audio id="musicClick" src="{$AppImages}click.mp3" preload="auto"></audio>
              <script type="text/javascript">
				$(function(){
					var maxsel = <eq name="qt.IsMultiple" value="1">99<else/>1</eq>;
					$(".option").on("click",function(){
						$(this).toggleClass("option-sel");
						$("#musicClick")[0].play();
					});
					
					$("#submit").on("click",function(){
						var $btn = $(this);
						if($btn.hasClass("disabled")) return;
						var $answer = $(".options .option-sel");
						if($answer.size() == 0){ 
							alert("请选择一个答案!");
							return;
						}
						if($answer.size() > maxsel){
							alert("本题最多只能选择个"+maxsel+"答案!");
							return;
						}
						var i=0;
						var ans = "";
						$answer.each(function(index,o){
							if(i++ != 0){ ans += ","; }
							ans += $(o).attr("data-value");
						});
						$btn.addClass("disabled");
						var url = "{$NextUrl}&ans="+ans;
						window.location.href = url;
					});
				});
			</script>
			<div id="submit"><img src="{$AppImages}next_btn.png"><span>下一步</span></div>
		</div>
     </case>
     <case value="end">
			<style>
                .wrapper{text-align: center;}
                .bg-suggest{width: 270px;margin: 20px auto 0px;}
                .title{position: absolute;top: 30px;width: 220px;left : 50%;margin-left: -110px;font-size: 20px;}
                .thanks{position: absolute;top: 285px;font-size: 14px;left: 50%;color: #666666;}
                .desc-cont{position: absolute;top: 105px;width: 228px;left: 50%;margin-left: -112px;text-align: left;word-wrap:break-word;word-break:break-all}
                .next-btn{color: #FFF;position: relative;width: 120px;display: block;margin: -70px auto 0px;padding: 8px 22px;font-size: 18px;}
                #suggest{width: 206px;height: 158px;border: 1px solid #c4c7cc;padding: 8px;word-wrap:break-word;word-break:break-all; font-size:16px;}
                .page-url{margin-top: 30px;}
            </style>
            <script type="text/javascript">
				$(function(){
					$(".finish").on("click",function(){
						var btn = $(this);
						if(btn.hasClass("disabled")) return;
						var data = {"suggest":$("#suggest").val()};
						$.post("{$NextUrl}", data,  function (data, textStatus){        
					   			if (data.status == 1){  
									//提交建议后，自动调转到指定链接
									window.location.href = data.data;
								}
							}, "json");
					  });
					  btn.addClass("disabled");
				});
			</script>
            <img class="bg" src="{$AppImages}lastbg.jpg">
            <img class="bg-suggest" src="{$AppImages}suggest_bg.png">
            <div class="title">建议</div>
            <div class="thanks">感谢您的参与！</div>
            <div class="desc-cont" style="padding:0;">
            	<textarea id="suggest" rows="5" cols="25" placeholder="有什么建议留给我们？"></textarea>
            </div>
            <div class="next-btn finish">完 成</div>
     </case>
     </switch>
     <p class="page-url"><a href="{:HomeUrl()}" target="_blank" class="page-url-link">{$WebName}</a></p>
	</div>
    <!--wrapper end-->
</body>
</html>
<script type="text/javascript">
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    	WeixinJSBridge.call('hideToolbar');
    });
</script>